<template>
  <div class="file_container">
    <img class="upload_add" src="@/assets/images/system/fileUpload.png"></img>
    <div class="upload_text"><span>快递文件</span></div>
    <div class="command_button" @click="pairFileClick" v-if="!pairFile">
      取件码取件
    </div>
    <div class="command_button_pair" v-else>
      <div class="pair_code_div">
        <input class="pair_code" maxlength="6" pattern="[A-Za-z0-9]+" placeholder="请输入六位取件码">
        <img class="close" src="@/assets/images/system/close.png" @click="pairFileClose"/>
      </div>
    </div>
  </div>
  <div class="pair_logo">
    <img style="width: 30px;height: 30px;border-radius: 30px;margin-right: 10px;box-shadow: 0 0 6px 1px #67a6e8;" src="@/assets/images/system/fileLogo.png">
    <span>文件快递站</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pairFile: false
    }
  },
  methods: {
    pairFileClick() {
      this.pairFile = true
      setTimeout(() => {
        document.querySelector('.command_button_pair').style.width = '275px';
      }, 50)
    },
    pairFileClose() {
      document.querySelector('.command_button_pair').style.width = '100px';
      setTimeout(() => {
        this.pairFile = false
      }, 300)
    }
  }
}
</script>

<style>
@font-face {
  font-family: 'OppoSans';
  src: url('../assets/fonts/OPPOSans.ttf') format('opentype');
}

body {
  user-select: none;
  margin: 0;
  height: 100vh;
  width: 100vw;
  background-image: url("@/assets/images/background/finderIQ.png");
  background-size: cover;
  font-family: "OppoSans", serif;
}
.pair_logo {
  position: absolute;
  left: 20px;
  top: 20px;
  font-size: 20px;
  display: flex;             /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平对齐方式，可以使用: flex-start, center, space-between, space-around 等 */
  align-items: center;        /* 垂直居中对齐 */
}
.file_container {
  padding: 0 10px;
  position: absolute;
  box-shadow: 0 4px 15px 5px rgba(0, 0, 0, 0.2);
  background: white;
  height: 80px;
  width: 300px;
  border-radius: 100px;
  top: calc(50vh - 80px);
  left: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: left 0.3s ease-in-out;
}
.file_container:hover {
  left: 120px;
}

.upload_add {
  z-index: 99;
  left: 15px;
  position: absolute;
  width: 40px;
}

.upload_text {
  z-index: 99;
  position: absolute;
  left: 60px;
  font-weight: bold;
  font-size: 30px;
}

.command_button {
  z-index: 99999;
  right: 10px;
  position: absolute;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 20px;
  border-radius: 100px;
  background: #f1f1f1;
  padding: 0 10px;
  width: 100px;
  text-align: center;
  cursor: pointer;
}

.command_button:hover {
  background: #0e172b;
  color: white;
}

.command_button_pair {
  z-index: 99999;
  right: 10px;
  position: absolute;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 20px;
  border-radius: 100px;
  background: white;
  padding: 0 10px;
  width: 100px;
  text-align: center;
  cursor: pointer;
  transition: width 0.3s ease-in-out; /* 设置宽度变化的动画 */
  border: 2px solid #cdcdcd;
}
.command_button_pair:hover {
  border: 2px solid #0e172b;
}
.pair_code_div {
  width: 100%;
  display: flex;             /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 水平对齐方式，可以使用: flex-start, center, space-between, space-around 等 */
  align-items: center;        /* 垂直居中对齐 */
}
.pair_code {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
  outline: none;
  border: none;
  width: 100%;
  white-space: nowrap;
  resize: none;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  background: transparent;
}
.close {
  height: 35px;
  transition: height 0.3s ease-in-out;
}
.close:hover {
  height: 40px;
}
</style>